<template>
  <div class="container">
    <h1>该功能有待开发ing~</h1>
    <div class="message_left">
      <h2>我的消息</h2>
            <div class="message_list" v-for="(item,index) in listData">
              {{item.title}}
      </div>

      <div class="message_list1">
      </div>
    </div>
    <div class="message_top">
      <span> 私信{{}}</span>
      <div  class="t_button">
  <Tbutton type='info' content='发送私信' size="mini"/>
      </div>
    <router-view></router-view>
    </div>
    <div class="message_con">
      <div class="comments_list" v-for="(item, index) in 5">
      <div>
        <img src="" alt="">
        <div>
          name
          <a href=""></a>
          <div>
            日期
          </div>
        </div>
        <div>
          content
        </div>
      </div>
      {{index}}
      </div>
      右侧下面
    </div>
  </div>
</template>

<script lang="ts" setup>
import Tbutton from '@/base-ui/TButton/src/TButton.vue';
import { useStore } from '@/store';
import localCache from '@/utils/cache'
import { ref  } from 'vue'



const listData = ref([{
  title: '@我的',
  name: 'atme'
}
,
{
  title: '私信',
  name: 'private'
},
{
  title: '评论',
  name: 'comments'
},
{
  title: '通知',
  name: 'notify'
},
])
</script>
<style lang="less" scoped>
.container{
  width: 900px;
  height: 830px;
  margin: auto;
  background-color: rgb(224, 168, 148);
}


.message_left{
  position: absolute;
  width: 200px;
  height: 830px;
  background-color: rgb(138, 138, 155);
  h2{
    margin: 20px  20px;
    font-size: 24px;
    font-weight: 700;
  }
}
.message_top{
  margin-left: 200px;
  position: absolute;
  margin-top: 20px;
  background-color: rgb(121, 112, 170);
  width: 700px;
  height: 50px;
  border-bottom: 5px solid rgb(94, 117, 94);
  span{
    font-size: 18PX;
    padding: 25px;
    font-weight: 900;
  }

.t_button{
  margin-left: -200px;
  margin-top: -45px;
}

}
.message_con{
  margin-left: 200px;
  margin-top: 80px;
  position: absolute;
width: 700px;
height: 750px;
background-color: rgb(166, 201, 204);
}
.message_list{
  padding: 20px ;
  text-align: center;
  font-size: 20px;
  border: 2px solid skyblue;
}
</style>
